<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>视频播放器</title>
  <link rel="stylesheet" href="../src/css/video.css">
</head>
<body>
  <video id="video" poster="https://media.w3.org/2010/05/sintel/poster.png">
    <source id="mp4" src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
    <source id="webm" src="https://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
    <source id="ogv" src="https://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
  </video>
  <div class="controls">
    <button class="play player"></button>
    <div class="progress">
      <span class="progress__cache"></span>
      <span class="progress__time"></span>
    </div>
    <div class="video__time">
      <span class="current__time">00:00:00</span>|<span class="total__time">00:00</span>
    </div>
    <div class="volume">
      <p class="volume__bar">
        <span class="volume__bar__round"></span>
      </p>
    </div>
  </div>

  <script src="/node_modules/jquery/dist/jquery.js"></script>
  <script src="../src/js/video.js"></script>
</body>
</html>